<template>
  <div class="bg-Cont">
    <div class="cont">
      <div class="top">
        <p>简单的表</p>
        <span>这是这张桌子的副标题</span>
      </div>
      <table>
        <thead>
          <tr>
            <th>名称</th>
            <th>国家</th>
            <th>市</th>
            <th>薪水</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>达科塔莱斯</td>
            <td>尼日尔</td>
            <td>的Oud-Tunrhout</td>
            <td>$ 35,738</td>
          </tr>
          <tr>
            <td>Minerva Hooper</td>
            <td>库拉索</td>
            <td>Sinaai-WAAS</td>
            <td>$ 23,738</td>
          </tr>
          <tr>
            <td>Sage Rodriguez</td>
            <td>荷兰</td>
            <td>陆上公园</td>
            <td>$56,142</td>
          </tr>
          <tr>
            <td>菲利普查利</td>
            <td>韩国，南方</td>
            <td>格洛斯特</td>
            <td>$38,735</td>
          </tr>
          <tr>
            <td>多丽丝格林</td>
            <td>智利</td>
            <td>费尔德基兴在Karnten</td>
            <td>$63,542</td>
          </tr>
          <tr>
            <td>梅森波特</td>
            <td>智利</td>
            <td>格洛斯特</td>
            <td>$78,615</td>
          </tr>
        </tbody>
      </table>
    </div>
     <div class="cont">
      <div class="top">
        <p>简单的表</p>
        <span>这是这张桌子的副标题</span>
      </div>
      <table>
        <thead>
          <tr>
            <th>名称</th>
            <th>国家</th>
            <th>市</th>
            <th>薪水</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>达科塔莱斯</td>
            <td>尼日尔</td>
            <td>的Oud-Tunrhout</td>
            <td>$ 35,738</td>
          </tr>
          <tr>
            <td>Minerva Hooper</td>
            <td>库拉索</td>
            <td>Sinaai-WAAS</td>
            <td>$ 23,738</td>
          </tr>
          <tr>
            <td>Sage Rodriguez</td>
            <td>荷兰</td>
            <td>陆上公园</td>
            <td>$56,142</td>
          </tr>
          <tr>
            <td>菲利普查利</td>
            <td>韩国，南方</td>
            <td>格洛斯特</td>
            <td>$38,735</td>
          </tr>
          <tr>
            <td>多丽丝格林</td>
            <td>智利</td>
            <td>费尔德基兴在Karnten</td>
            <td>$63,542</td>
          </tr>
          <tr>
            <td>梅森波特</td>
            <td>智利</td>
            <td>格洛斯特</td>
            <td>$78,615</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },

  methods: {}
}
</script>

<style lang='less'  scoped>
.bg-Cont{
  margin-left: 260px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 60px;
  .cont{
    width: 100%;
    // height: 300px;
    background:white;
    padding: 0 20px;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 100px;
    .top{
      width: 100%;
      padding: 20px 0;
      background:#5DB461;
      position: relative;
      top: -20px;
      border-radius: 5px;
      box-sizing: border-box;
      padding-left: 20px;
      p{
        font-size: 20px;
        color: white;
      }
      span{
        display: block;
        margin-top: 10px;
        color: #B3DDB5;
        font-size: 12px;
      }
    }
    table{
      width: 100%;
      display: block;
      thead{
        width: 100%;
        display: block;
        tr{
          display: block;
          width: 100%;
          display: flex;
          margin: 10px 0;
          th{
            color: #5DB461;
            &:nth-of-type(1){
              flex: 2;
              text-align: left;
            }
            &:nth-of-type(2){
              flex:1;
              text-align: left;
            }
            &:nth-of-type(3){
              flex: 2;
              text-align: left;
            }
            &:nth-of-type(4){
              flex: 1;
              text-align: right;
            }
          }
        }
      }
      tbody{
        width: 100%;
        display: block;
        padding-bottom: 20px;
        tr{
          display: block;
          width: 100%;
          display: flex;
          border-top: 1px solid #F0F0F0;
          margin-top: 20px;
          padding-top: 10px;
          // margin-bottom: 20px;
          
          td{
            color: #888888;
            &:nth-of-type(1){
              flex: 2;
              text-align: left;
            }
            &:nth-of-type(2){
              flex:1;
              text-align: left;
            }
            &:nth-of-type(3){
              flex: 2;
              text-align: left;
            }
            &:nth-of-type(4){
              flex: 1;
              text-align: right;
            }
          }
        }
      }
    }
  }
}
</style>
